<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
    <div>前后端交互</div>
    <script type="text/javascript">
        /**
         *   ajax
         */
        var ret = '----'
        $.ajax({
            url: 'http://localhost:3000/hello',
            success: function(data) {
                ret = data;
                console.log(ret)
            }
        })

        //由于ajax是异步的 此时还没有执行success 所以ret 为 ---
        console.log(ret)

        // ---------------------
        $.ajax({
            url: 'http://localhost:3000/hello',
            success: function(data) {
                ret = data;
                console.log(ret)
            }
        })

        $.ajax({
            url: 'http://localhost:3000/hello1',
            success: function(data) {
                ret = data;
                console.log(ret)
            }
        })

        $.ajax({
            url: 'http://localhost:3000/hello2',
            success: function(data) {
                ret = data;
                console.log(ret)
            }
        })

        //以上情景 如果存在调用多个ajax请求，这些请求执行的顺序和写法顺序无关 和接口返回先后有关
        //如果这些接口存在依赖关系 如：接口返回要有顺序
        //或者第二个接口参数需要第一个接口的返回值等
        //ajax就只能使用嵌套 如第二个ajax 写着第一个ajax的success里面
        //嵌套太多 代码混乱 称之为 回调地狱

        //解决方案 ： promise
    </script>


</body>

</html>